
<template>
<div class="home">
<!-- 顶部 -->
    <div class="top">
      <!-- <div class="top_title left">
      <img src="../../assets/image/logo.png" alt="" >
        <div class="line"></div>
        <div class="logoTitle">
          <div class="logoTitle_one">xxx系统</div>
          <div class="logoTitle_two">xxxxxxxxxxxxxxx</div>
        </div>
      </div> -->
      <div class="home_tab">
          <div class="tab_box">
            <div class="tab">
              <ul>
                <li v-for="(item,index) in tabList" :key="index" :class="tabActive === item.path? 'tabbg': ''"
                  @click="handleClickTab(item.path)">
                  <div class="a" :class="tabActive === item.path? 'astyle': ''">{{item.text}}
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      <div class="user_info right">
        <span class="user_info1">欢迎您:<span class="user_info2">小战</span>
        </span>
          <span class="user_info3"><i class="el-icon-setting edit" ></i></span>
          <span class="user_info4"><i class="el-icon-switch-button layout"></i></span>
      </div>
    </div>
              <div class="middleContent">
            <router-view></router-view>
          </div>
  
</div>
</template>
<script>
export default {
  data () {
    return {
      tabActive:'',
      tabList:[{id:1,text:'数据',path:'/homedata'},{id:2,text:'预览',path:'/homepreview'},{id:3,text:'列表',path:'/homeList'},{id:4,text:'波形',path:'/homewave'},{id:5,text:'设置',path:'/homeinstall'},]

    }
  },
  mounted(){
  },
  methods:{
    handleClickTab(index) {
      this.$router.push({
        path:index
      })
      this.tabActive = index;
    },
  }
}
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background-color: #080827;
    padding:0px 8px 8px 8px;
  }
  .middleContent{
    width: 100%;
    height: calc(100% - 60px);
    overflow: hidden;
  }
  /* 顶部 */
  .top {
    height: 70px;
    width: 100%;
    box-shadow: 0 0 3px #888;
    /* background: #000; */
    background: url("../../assets/image/bg.png") no-repeat 0 -872px;
    color: #fff;
    display: flex;
  }
  .top_title {
    width: 20%;
    line-height: 70px;
    font-size: 22px;
    margin-left: 30px;
    display: flex;
  }
  .top_title img {
    height: 50px;
    vertical-align: middle;
    text-align: center;
  }
  .top_title .logo_main {
    font-family:"黑体";
    color: #fff;
    font-size:24px;
    line-height:60px;
    margin-left: 2px;
  }
  .el-menu-item-group__title{
    padding: 0;
  }
  .el-menu-item-group{
     border-bottom: 1px solid #6699FF;
  }
  .el-menu-item-group>>>.el-menu-item-group__title {
    padding: 0px 0 0px 20px;
  }
  .el-col{
    width: 100%;
    background-color:#F0F8FF ;
  }
  .el-col>>>.el-submenu__title{
    /* border-top: 1px solid #3399CC; */
    border-bottom: 1px solid #6699FF;
  }
.el-col h5{
    width: 100%;
    height: 50px;
    /* text-align: center; */
    line-height: 50px;
    background-color:#328fd2;
    color: #fff;
    font-size: 16px;
    padding-left: 25px;
  }
  .top_title .line {
    width:2px;
    height: 30px;
    line-height: 60px;
    background: #fff;
    margin: 18px 0px 0px 18px;
  }
  .top_title .logoTitle {
    margin-left: 6px;
  }
  .logoTitle_one {
    font-family:"楷体";
    font-size: 20px;
    line-height: 46px;
    height:30px;
    font-weight: 400;
  }
  .logoTitle_two {
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: 30px;
    line-height: 28px;
    font-weight: 300;
    letter-spacing: 0px;
  }
  .user_info {
    width: 20%;
    line-height: 60px;
    display: flex;
    margin-left: 5%;
  }
  .user_info1 {
    line-height: 60px;
  }
  .user_info2 {
    margin-left: 10px;
    font-size: 18px;
  }
  .user_info3 {
    margin: 0 0px 0 20px;
  }
  .user_info4 {
    margin-left: 16px;
  }
  .edit, .layout {
    cursor: pointer;
    line-height: 60px;
  }
  .left {
  float: left;
}
.right {
  float: right;
}
.home_tab{
  width: 60%;
}
 .tab_box {
  width: 100%;
  height: 100%;
  /* padding: 0 322px 0 364px; */
}
.tab_box .tab {
  width: 100%;
  height: 100%;
}
 .tab_box .tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 58px;
  width: 100%;
  display: flex;
  margin: 6px 0px;
}
 .tab_box .tab ul li {
  float: left;
  border-radius: 4px;
  padding: 13px 10px;
  /* 导航 */
  margin-left: 20px;
  cursor: pointer;
  width: 80px;
  border: 1px solid #1c66b2;
}
 .tab_box .tab ul li .a {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    color: #1590f6;
    height: 28px;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #1c66b2;
    text-align: center;
}
/* .home /deep/ .el-tabs--border-card>.el-tabs__header{
  background-color: #6699ffb0!important;
  color: #fff!important;
} */
/* .home /deep/ .el-tabs--border-card>.el-tabs__content{
  background-color: #30335f!important;
} */
 .tabbg {
  background: url("../../assets/image/tabbg2.png") no-repeat;
  background-size: 122px 56px;
  font-weight: 700;
}
</style>